<template>
    <div style="height: 100vh">
        <div class="title">
            <h1></h1>
        </div>
        <div id="loginDiv" class="login">
            <el-form :model="loginForm" :rules="loginRules"  label-width="80px" class="demo-ruleForm">
                <el-form-item label="账号" prop="phone">
                    <el-input v-model="loginForm.phone" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()" style="width:100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import tips from "@/assets/script/util/tips";
    import {mapActions} from "vuex"
    import {LoginForm} from "@/assets/script/model";

    export default {
        name: "Login",
        data() {
            return {
                loginForm: new LoginForm(),
                loginRules: {
                    phone: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {max: 11, message: '输入字符超出限制，请重试', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {max: 16, message: '输入字符超出限制，请重试', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            ...mapActions("user", ["ALogin"]),
            async submitForm() {
                const phone = this.loginForm.phone;
                const password = this.loginForm.password;
                console.log(this.loginForm);
                if (phone === '' && password === '') {
                    await tips.warn("数据不能为空");
                    return false;
                }
                if (!(/^[0-9a-zA-Z]+$/.test(phone))) {
                    await tips.error("账号格式错误，请重新输入");
                    return false;
                }
                if (!(/^[0-9a-zA-Z]+$/.test(password))) {
                    await tips.error("密码格式错误");
                    return false;
                }
                try {
                     this.ALogin(this.loginForm)
                } catch (e) {
                    throw new Error(e)
                }
            }
        }
    }
</script>

<style scoped>
    .login {
        min-width: 350px;
        width: 25%;
        margin: 30vh auto;
        vertical-align: middle;
    }

    .title {
        min-width: 350px;
        text-align: center;
        width: 25%;
        margin: 0 auto;
        vertical-align: middle;
    }

</style>